<template>
    <div>
        <el-row>
            <el-col :span="5">
                <g-formItem
                    type="input"
                    :value="name"
                    label="姓名"
                    otherType="password"
                    @valueChange="(v) => (name = v)"
                    :clearable="true"
                ></g-formItem>
            </el-col>
            <el-col :span="5">
                <g-formItem
                    type="select"
                    :value="sex"
                    label="性别"
                    :option="sexOptions"
                    :multiple="true"
                    @valueChange="(v) => (sex = v)"
                ></g-formItem>
            </el-col>
            <el-col :span="8">
                <g-formItem
                    type="radio"
                    :value="radio"
                    label="单选"
                    :option="radioOptions"
                    @valueChange="radioInput"
                ></g-formItem>
            </el-col>
        </el-row>
        <el-row>
            <el-button class="g-button">按钮</el-button>
        </el-row>
    </div>
</template>
<script setup>
import { reactive, ref } from "vue";
const name = ref("郭子文");
const sex = ref();
const sexOptions = [{ value: 1, label: "男" },{ value: 0, label: "女" }];
const radio = ref('01')
const radioOptions = [{value:'01',label:'单选1'},{value:'02',label:'单选2'},{value:'03',label:'单选3'}]
const radioInput = (value)=>{
    radio.value = value
}
</script>